<template>
  <div>
    <el-card>
      <el-row :gutter="24">
        <el-form ref="stuForm" :model="formData" :rules="rules" size="medium" label-width="100px">
          <el-col :span="8">
            <el-form-item label="仓库编码">
              <el-input
                v-model="formData.code"
                placeholder="请输入仓库编码"
                clearable
                :style="{width: '100%'}"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入仓库名称" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库类型" prop="type">
              <el-select v-model="formData.type" placeholder="请选择仓库类型" clearable :style="{width: '100%'}">
                <el-option
                  v-for="(item, index) in typeOptions.typeOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="省/市/区">
              <el-cascader
                v-model="selectedOptions"
                :options="options"
                :style="{width: '100%'}"
                placeholder="请选择"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="详细地址">
              <el-input v-model="formData.address" placeholder="请选择详细地址" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库状态" prop="status">
              <el-radio-group v-model="formData.status" size="medium">
                <el-radio
                  v-for="(item, index) in statusOptions"
                  :key="index"
                  :label="item.value"
                  :disabled="item.disabled"
                >{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" />
          <el-col :span="8">
            <el-form-item label="仓库面积" prop="surface">
              <el-input v-model="formData.surface" placeholder="请选择仓库面积" clearable :style="{width: '100%'}">
                <template slot="append">m²</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="负责人" prop="personName">
              <el-input v-model="formData.personName" placeholder="请输入负责人" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系电话">
              <el-input v-model="formData.phone" placeholder="请选择联系电话" clearable :style="{width: '100%'}" />
            </el-form-item>
          </el-col>
          <el-col>
            <el-col :span="10" align="end">
              <el-form-item>
                <el-button type="warning" size="medium" plain :style="{width:'150px',height:'40px'}" @click="$router.back()"> 返回 </el-button>
              </el-form-item>
            </el-col>
            <el-col :span="10" align="start">
              <el-form-item>
                <el-button type="warning" size="medium" :style="{width:'150px',height:'40px'}" @click="submitForm"> 提交 </el-button>
              </el-form-item>
            </el-col>
          </el-col>
        </el-form>
      </el-row>
    </el-card>
  </div>
</template>
<script>
// 导入仓库类型枚举数据
import typeOptions from '@/constant/areaStatus'
// 导入新增仓库请求接口
import { addWareHouseAPI } from '@/api/wareHouse'
// 引入地区信息数据
import { regionData, CodeToText } from 'element-china-area-data'
export default {
  components: {},
  props: [],
  data() {
    return {
      typeOptions,
      formData: {
        code: 'CK000008',
        name: undefined,
        type: undefined,
        address: '',
        status: 0,
        surface: '',
        personName: '',
        phone: undefined,
        con: undefined,
        sub: undefined
      },
      options: regionData,
      selectedOptions: [],
      rules: {
        name: [{
          required: true,
          message: '请输入仓库名称',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '请选择仓库类型',
          trigger: 'change'
        }],
        address: [],
        status: [{
          required: true,
          message: '请至少选择一个仓库状态',
          trigger: 'change'
        }],
        personName: [{
          required: true,
          message: '请至少选择一个负责人',
          trigger: 'blur'
        }],
        surface: [{
          required: true,
          message: '请至少选择一个仓库面积',
          trigger: 'blur'
        }]
      },
      areaOptions: [],
      statusOptions: [{
        label: '启用',
        value: 0
      }, {
        label: '停用',
        value: 1
      }]
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {},
  methods: {
    async submitForm() {
      // 验证表单
      await this.$refs.stuForm.validate()
      // 发送新增请求,这里需要处理地区数据进行处理，转换成需要的数据格式，CodeToText是地区插件提供的方法，将地区码转换成字符串
      await addWareHouseAPI({
        ...this.formData,
        province: this.selectedOptions[0],
        city: this.selectedOptions[1],
        area: this.selectedOptions[2],
        location: `${CodeToText[this.selectedOptions[0]]}/${CodeToText[this.selectedOptions[1]]}/${CodeToText[this.selectedOptions[2]]}`
      })
      // 新增成功通知
      this.$message.success('新增仓库成功！')
      // 跳转至仓库管理页面
      this.$router.push('/information/store')
    },
    resetForm() {
      this.$refs['stuForm'].resetFields()
    }
  }
}

</script>
<style lang="scss" scoped>
::v-deep .el-card{
  margin: 20px;
}
</style>
